<template>
    <div class="main-box">
        <div class="massageBox">
            <div v-if="massageItem==true" style="height: 100%;width: 100%;">
                <div style="overflow-y: auto;margin-bottom: 1%;height: 74%" class="box">
                    <!--用户-->
                    <el-row style="margin-top: 2%" v-if="role==='customer'" v-for="(item,i) in massageContent" :key="i">
                        <div v-if="item.sender==1" style="float: left" >
                            <div>
                                <div style="float: left">
                                    <img style="margin-top: 2%" src="../../assets/image/storeIcon.png">
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                                <el-card shadow="always">
                                    <div style="width: 80%;margin: 10px">
                                        <span style="white-space:pre-wrap">{{item.content}}</span>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                        <div v-if="item.sender==2" style="float: right">
                            <div style="float: right">
                                <el-divider direction="vertical"></el-divider>
                                <img style="margin-top: 2%" src="../../assets/image/icon.png">
                            </div>
                            <el-card shadow="always">
                                <div style="width: 80%;margin: 10px">
                                    <span style="white-space:pre-wrap">{{item.content}}</span>
                                </div>
                            </el-card>
                        </div><div  style="float: right ;margin:40px 5px 0 0;font-size: 9px;color: #666666" v-if="item.sender==2&&item.chatStatus ===unread">未读</div>
                    </el-row>
                    <!--商家-->


                    <el-row style="margin-top: 2%" v-if="role==='saler'" v-for="(item,k) in massageContent" :key="k">
                        <div v-if="item.sender==1" style="float: left">
                            <div>
                                <div style="float: left">
                                    <img style="margin-top: 2%" src="../../assets/image/icon.png">
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                                <el-card shadow="always" >
                                    <div style="margin: 10px">
                                        <p>{{item.content}}</p>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                        <div v-if="item.sender==2" style="float: right">
                            <div style="float: right">
                                <el-divider direction="vertical"></el-divider>
                                <img style="margin-top: 2%" src="../../assets/image/storeIcon.png">
                            </div>
                            <el-card shadow="always">
                                <div style="margin: 10px">
                                    <p >{{item.content}}</p>
                                </div>
                            </el-card>
                        </div><div  style="float: right ;margin:40px 5px 0 0;font-size: 9px;color: #666666" v-if="item.sender==2&&item.chatStatus ===unread">未读</div>
                    </el-row>
                </div>
                <div style="float: right">

                </div>
                <el-button @click="submit()" class="submitBtn"
                           onmouseover="this.style.backgroundColor='transparent';this.style.color='#2d2d2d'"
                           onmouseout="this.style.backgroundColor='#ff7a88';this.style.color='#fff'"
                           round >发送</el-button>
                <el-input style="margin: 5px;right: 5px" maxlength="20" show-word-limit type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
            </div>
        </div>

        <h2 style="margin-left: 16%;">联系人</h2>
        <div style="overflow-y: auto" class="massageList">
            <el-divider content-position="center">
                <img src="../../assets/image/massageList.png">
            </el-divider>
            <h3 style="margin-left: 25%;margin-top: 15%" v-if="massageList.length===0">还没有联系人呢 ｡◔‸◔｡</h3>
            <el-card v-for="(item,o) in massageList" :key="o" class="massageItem" shadow="hover"
                     onmouseover="this.style.backgroundColor='#ffccd9';this.style.color='#fff'"
                     onmouseout="this.style.backgroundColor='';this.style.color=''" @click.native="massage(item.account)">
                <div style="float: left">
                    <div style="float: left">
                        <img style="margin-top: 5%" src="../../assets/image/massage.png">
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <div style="float: right">
                        <h3>{{item.account}}</h3>
                        <p>{{item.content}}</p>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    import POST from "../../api/POST"
    import Cookie from "js-cookie"
    export default {
        name: "Message",
        data () {
            return {
                role:Cookie.get('role'),
                massageList: [],
                publicAccout:'',
                tempList:[],
                tempList2:[],
                massageItem: true,
                textarea: '',
                massageContent:[]
            }
        },
        created(){
            console.log(this.role)
            this.getMList();

        },
        methods: {
            sortRule(a,b) {
        return a.date > b.date;
    },
            massage(oaccount){
                this.massageItem=true;
                this.publicAccout = oaccount;
                this.textarea='';
                this.getLTJL();
            },
            getLTJL(){
              let data = {
                  token:Cookie.get('token'),
                  oaccount:this.publicAccout,
              }
              POST.chatList(data).then(res=>{
                    let selfac = Cookie.get('account');
                    console.log(selfac)
                    this.massageContent=[]
                  res.forEach(item=>{
                      if(item.receiver === selfac){
                          let newItem = {
                              sender :1,
                              content:item.content,
                              date :item.chatDate,
                              state:item.chatStatus,
                          }
                          this.massageContent.push(newItem)

                      }else {
                          let newItem = {
                              sender :2,
                              content:item.content,
                              date :item.chatDate,
                              state:item.chatStatus
                          }
                          this.massageContent.push(newItem)
                      }
                  })
                  this.massageContent.sort(this.sortRule)
                  console.log(this.massageContent)
              })

            },
            getMList(){
                let data = {
                    token:Cookie.get('token')
                }
                //别动我代码，鲨人警告
                POST.cusrecentChat(data).then(res=>{
                    this.massageList=[]
                    this.tempList = res;
                    var dateMap = new Map();
                    var positonMap = new  Map();
                    let selfac = Cookie.get('account')
                    this.tempList.forEach(item=>{
                        let getin
                        if (item.receiver===selfac){
                            getin = item.sender
                        }else{
                            getin =item.receiver
                        }
                        if(dateMap.get(getin)!==undefined){
                            if(item.chatDate>dateMap.get(getin)){
                                this.massageList.splice(positonMap.get(getin),1)
                                let newItem = {
                                    account:getin,
                                    content: item.content,
                                    status: item.chatStatus,
                                }
                                this.massageList.push(newItem)
                            }else {
                            }

                        }else {
                            dateMap.set(getin,item.chatDate)
                            positonMap.set(getin,this.massageList.length)
                            let newItem = {
                                account:getin,
                                content: item.content,
                                status: item.chatStatus,
                            }
                            this.massageList.push(newItem)
                        }
                    })
                    console.log(this.massageList)
                    this.massageList.forEach(item=>{
                        this.tempList2.push(item)
                    })
                    this.massageList=[]
                    this.tempList2.forEach(item=>{

                        this.massageList.unshift(item)
                    })
                    this.publicAccout =  this.massageList[0].account
                    this.getLTJL()
                })

            },
            getMList2(){
                let data = {
                    token:Cookie.get('token')
                }
                //别动我代码，鲨人警告
                POST.cusrecentChat(data).then(res=>{
                    this.massageList=[]
                    this.tempList = res;
                    var dateMap = new Map();
                    var positonMap = new  Map();
                    let selfac = Cookie.get('account')
                    this.tempList.forEach(item=>{
                        let getin
                        if (item.receiver===selfac){
                            getin = item.sender
                        }else{
                            getin =item.receiver
                        }
                        if(dateMap.get(getin)!==undefined){
                            if(item.chatDate>dateMap.get(getin)){
                                this.massageList.splice(dateMap.get(getin),-1)
                                let newItem = {
                                    account:getin,
                                    content: item.content,
                                    status: item.chatStatus,
                                }
                                this.massageList.unshift(newItem)
                            }else {
                            }

                        }else {
                            dateMap.set(getin,item.chatDate)
                            positonMap.set(getin,this.massageList.length)
                            let newItem = {
                                account:getin,
                                content: item.content,
                                status: item.chatStatus,
                            }
                            this.massageList.unshift(newItem)
                        }
                    })
                    console.log(this.massageList)

                    this.publicAccout =  this.massageList[0].account
                    this.getLTJL()
                })

            },
            submit(){
                let data={
                    token:Cookie.get('token'),
                    oaccount:this.publicAccout,
                    content:this.textarea,
                    figure:1
                }
                POST.cusChat(data).then(res=>{
                    this.getLTJL(this.publicAccout)
                })


            }
        }
    }
</script>

<style scoped>

    .massageList {
        height: 100%;
        width: 400px;
        margin-left: 2%;
        float: left;
        /*border: 2px solid #8c939d;*/
    }
    .massageBox {
        padding: 20px;
        height: 100%;
        width: 63%;
        margin-right: 2%;
        margin-top: 40px;
        float: right;
        border: 2px solid #8c939d;
    }
    .box {
        height: 80%;
    }
    .main-box {
        width: 100%;
        height: 87%;
        position: absolute;
        right: 0;
        left: 0;
        top: 65px;
        margin: auto;
    }
    .massageItem{
        height: 75px;
    }
    .submitBtn{
        float: right;
        border-radius: 20px;
        margin-bottom: 0px;
        border:solid 2px #ff7a88;
        background-color: #f78989;
        color: #ffffff;
    }
    .unread{
        background-color: #f78989;
        font-size: 20px;
    }

</style>
